<div class="control-panel">
  <div class="button-panel">
    <button mat-raised-button color="primary" type="button" (click)="getVillains()" matTooltip="Refresh the villains">Refresh</button>
    <button mat-raised-button color="primary" type="button" (click)="enableAddMode()" *ngIf="!selectedVillain">Add</button>
    <button mat-raised-button color="warn" type="button" (click)="deleteAll()" matTooltip="Delete all villains">Delete All</button>
  </div>
  <app-filter [filterObserver]="filterObserver" filterPlaceholder="Filter by each villain's name and saying"
    class="filter-panel"></app-filter>
</div>
<div class="content-container">
  <div class="list-container">
    <div *ngIf="filteredVillains$ | async as villains">
      <mat-spinner *ngIf="loading$ | async;else villainList" mode="indeterminate" color="accent"></mat-spinner>
      <ng-template #villainList>
        <app-villain-list [villains]="villains" [selectedVillain]="selectedVillain" [commands]="commands"></app-villain-list>
      </ng-template>
    </div>
  </div>
  <div class="detail-container">
    <app-villain-detail *ngIf="selectedVillain" [villain]="selectedVillain" [commands]="commands">
    </app-villain-detail>
  </div>
</div>
